<template>
  <div>
    <div class="container-module">
      <el-form :inline="true" class="search-form" size="small">
        <el-row style="display: flex; flex-wrap: wrap">
          <div style="flex: 1">
            <el-form-item class="search-form-item" label="订单流水号" style="margin: 5px 0">
              <el-input clearable placeholder="请输入订单流水号" v-model="searchForm.order_no" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item class="search-form-item" label="收货人手机号" style="margin: 5px 0">
              <el-input clearable placeholder="请输入收货人手机号" v-model="searchForm.consignee_cellphone" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
            <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <div>
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20"></el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="getListWay"></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead"
                      :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col class="detail_table">
          <el-table highlight-current-row :data="OrderList" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100% height: 100%;" v-loading="loading">
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
              min-width="80" align="center">
              <template slot-scope="scope">
                <span>
                  <el-tooltip placement="top-start" :content="scope.row[fruit].toString()">
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="商品名称">
              <template slot-scope="scope">
                <el-tooltip placement="top-start" :content="scope.row.goods.goods_name + ''">
                  <div class="one_line_hidden" v-if="scope.row && scope.row.goods">
                    {{ scope.row.goods ? scope.row.goods.goods_name : "-" }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="address" label="商品主图">
              <template slot-scope="scope">
                <div style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image :src="scope.row.goods ? scope.row.goods.goods_image : ''" :preview-src-list="[
                        scope.row.goods ? scope.row.goods.goods_image : '',
                      ]" />
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column align="center" prop="address" label="规格名称">
              <template slot-scope="scope">
                {{ scope.row.goods.sku_name }}
              </template>
            </el-table-column> -->
            <el-table-column align="center" prop="address" label="收货人">
              <template slot-scope="scope">
                {{ scope.row.consignee_info.real_name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="收货人电话">
              <template slot-scope="scope">
                {{ scope.row.consignee_info.real_cellphone }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="收货人地址">
              <template slot-scope="scope">
                <el-tooltip placement="top-start" :content="scope.row.consignee_info.address + ''">
                  <div class="one_line_hidden" v-if="scope.row && scope.row.consignee_info">
                    {{ scope.row.consignee_info ? scope.row.consignee_info.address : "-" }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="店铺名称">
              <template slot-scope="scope">
                <el-tooltip placement="top-start" :content="scope.row.merchant.name + ''">
                  <div class="one_line_hidden" v-if="scope.row && scope.row.merchant">
                    {{ scope.row.merchant ? scope.row.merchant.name : "-" }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="address" label="负责人">
              <template slot-scope="scope">
                {{ scope.row.merchant.user_name }}
              </template>
            </el-table-column> -->
            <!-- <el-table-column align="center" prop="address" label="负责人电话">
              <template slot-scope="scope">
                {{ scope.row.merchant.user_cellphone }}
              </template>
            </el-table-column> -->
            <el-table-column align="center" prop="address" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 2">待发货</span>
                <span v-if="scope.row.status == 3">待收货</span>
                <span v-if="scope.row.status == 5">已取消</span>
                <span v-if="scope.row.status == 4">已完成</span>
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" width="150" prop="address" label="操作">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status == 2" type="text" size="mini" @click="editNotesWay(scope.row)">
                  去发货
                </el-button>
                <el-divider v-if="scope.row.status == 2" direction="vertical"></el-divider>
                <el-button type="text" size="mini" @click="detailsDialogway(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row style="text-align: right">
        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
          @pagination="getListWay" />
      </el-row>
    </div>
    <!-- 去发货弹框 -->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" title="去发货" :visible.sync="dialogSendOutGoods"
      width="500px" @close="SendOutGoodsClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="快递名称" prop="express_name">
          <el-input maxlength="20" show-word-limit clearable v-model="form.express_name"
            placeholder="请输入快递名称"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="express_num">
          <el-input clearable maxlength="20" show-word-limit v-model="form.express_num"
            placeholder="请输入快递单号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSendOutGoods = false">取 消</el-button>
        <el-button type="primary" @click="submitWay" :loading="dialogSendOutGoodsSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看快递信息 -->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" title="快递信息" :visible.sync="dialogdelivery"
      width="700px">
      <el-descriptions :style="index !== 0 ? 'margin-top:20px' : ''" v-for="(item, index) in delivery_list" :key="index"
        class="margin-top" :title="item.express_name" :column="3" border>
        <el-descriptions-item label="快递">
          {{ item.express_name }}
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
          {{ item.express_num }}
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">
          {{ item.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人名称">
          {{ item.recipient }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人手机号">
          {{ item.phone_number }}
        </el-descriptions-item>
        <el-descriptions-item label="省市区">
          {{ item.province_name }}
          {{ item.city_name }}
          {{ item.district_name }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ item.address_details }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogdelivery = false">取 消</el-button>
        <el-button type="primary" @click="dialogdelivery = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :append-to-body="true" :close-on-click-modal="false" title="订单信息" :visible.sync="detaildialog"
      width="800px">
      <el-row style="position: relative" v-loading="detailLoading">
        <el-descriptions title="订单信息" :column="3" border>
          <el-descriptions-item label="订单id">
            {{ detailsObj.order_id ? detailsObj.order_id : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">
            {{ detailsObj.order_no ? detailsObj.order_no : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag style="margin: 5px" v-if="detailsObj.status ? detailsObj.status == 1 : false"
              type="warning">待支付</el-tag>
            <el-tag style="margin: 5px" v-if="detailsObj.status ? detailsObj.status == 2 : false"
              type="success">已完成</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions style="margin-top: 20px" title="商品信息" :column="3" border>
          <el-descriptions-item label="商品ID">
            {{ detailsObj.goods ? detailsObj.goods.goods_id : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="商品名称">
            {{ detailsObj.goods ? detailsObj.goods.goods_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="购买数量">
            {{ detailsObj.goods ? detailsObj.goods.number : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="规格名称">
            {{ detailsObj.goods ? detailsObj.goods.sku_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="商品图片">
            <div style="width: 40px; height: 40px; margin: 0 auto">
              <el-image :src="detailsObj.goods ? detailsObj.goods.goods_image : ''" :preview-src-list="[
                  detailsObj.goods ? detailsObj.goods.goods_image : '',
                ]" />
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions style="margin-top: 20px" title="供应商信息" :column="3" border>
          <el-descriptions-item label="供应商ID">
            {{ detailsObj.merchant ? detailsObj.merchant.id : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="供应商名称">
            {{ detailsObj.merchant ? detailsObj.merchant.name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            {{ detailsObj.merchant ? detailsObj.merchant.user_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人手机号">
            {{ detailsObj.merchant ? detailsObj.merchant.user_cellphone : "-" }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions style="margin-top: 20px" title="收货信息" :column="3" border>
          <el-descriptions-item label="收货人名称">
            {{
              detailsObj.consignee_info
                ? detailsObj.consignee_info.real_name
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="收货人手机号">
            {{
              detailsObj.consignee_info
                ? detailsObj.consignee_info.real_cellphone
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="3">
            {{
              detailsObj.consignee_info
                ? detailsObj.consignee_info.address
                : "-"
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detaildialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getSupplyOrderList,
    editDelivery
  } from "@/api/order/index";
  import {
    getOrderSelfList,
    getOrderSelfDetail,
    orderSelfdelivery,
  } from "@/api/merchant/index";
  const tableTheadOption = {
    order_no: {
      label: "订单号",
      field: "order_no",
    },
    // "consignee_info.real_name": {
    //   label: "收货人姓名",
    //   field: "consignee_info.real_name",
    // },
    // "consignee_info.real_cellphone": {
    //   label: "收货人电话",
    //   field: "consignee_info.real_cellphone",
    // },
    // "consignee_info.address": {
    //   label: "收货人地址",
    //   field: "consignee_info.address",
    // },
    // "goods.goods_id": {
    //   label: "商品ID",
    //   field: "goods.goods_id",
    // },
    // "goods.goods_name": {
    //   label: "商品名称",
    //   field: "goods.goods_name",
    // },
    // "goods.goods_image": {
    //   label: "商品主图",
    //   field: "goods.goods_image",
    // },
    // "goods.sku_name": {
    //   label: "规格名称",
    //   field: "goods.sku_name",
    // },
    // status: {
    //   label: "状态",
    //   field: "status",
    // },
    // "merchant.id": {
    //   label: "商户ID",
    //   field: "id",
    // },
    // "merchant.name": {
    //   label: "店铺名称",
    //   field: "name",
    // },
    // " merchant.user_name": {
    //   label: "负责人姓名",
    //   field: "user_name",
    // },
    // "merchant.user_cellphone": {
    //   label: "负责人手机号",
    //   field: "user_cellphone",
    // },
  };
  const allTableThead = [
    "order_no",
    // "goods.goods_id",
    // "goods.goods_name",
    // "goods.goods_image",
    // "goodssku_name",
    // "consignee_inf.oreal_name",
    // "consignee_inf.oreal_cellphone",
    // "consignee_inf.oaddress",
    // "merchant.id",
    // "merchant.name",
    // "merchant.user_name",
    // "merchant.user_cellphone",
    // "status",
  ];
  const defaultTableThead = [
    "order_no",
    // "goods.goods_name",
    // "goods.goods_image",
    // "consignee_inf.oreal_name",
    // "consignee_inf.oreal_cellphone",
    // "consignee_inf.oaddress",
    // "merchant.name",
    // "merchant.user_name",
    // "status",
  ];
  export default {
    props: {
      detailsobj: {
        type: Object,
        default: {},
      },
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
      },
    },
    data() {
      return {
        // 默认表头
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: false,
        searchDisplay: false,
        searchForm: {
          goods_id: "", //商品ID
          search: "", //商品名称
          order_no: "", //订单编号
          mer_name: "", //商户名称
          mer_cellphone: "", //商户手机号
          delivery_no: "", //发货单号
          consignee_name: "", //收货人姓名
          consignee_cellphone: "", //收货人手机号
          status: "", //状态(1.待支付,2.已完成)
          count: 10,
          page: 1,
        },
        create_time: [],
        pay_time: [],
        OrderList: [],
        total: 0,
        dialogSendOutGoods: false,
        dialogSendOutGoodsSubmit: false,
        form: {
          detail_id: "",
          express_name: "",
          express_num: "",
        },
        rules: {
          express_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入快递名称"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,不能包含特殊字符")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
          express_num: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z]/g;
              if (value == "") {
                return callback(new Error("请输入快递单号"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,只能包含数字和英文")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        dialogdelivery: false,
        delivery_list: [],
        detailsObj: {},
        detaildialog: false,
        detailLoading: false,
      };
    },
    created() {
      this.searchForm.supplier_id = this.detailsobj.id;
      this.getListWay();
    },
    methods: {
      getListWay() {
        this.loading = true;
        getOrderSelfList(this.searchForm)
          .then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.loading = false;
              return this.$messages.error(res.msg);
            }
            this.loading = false;
            this.OrderList = res.data.list;
            this.total = res.data.total;
          })
          .catch((err) => {
            this.loading = false;
            this.$messages.error(err.msg);
          });
      },
      resetting() {
        this.searchForm = {
          status: "",
          user_id: "",
          order_no: "",
          phone_number: "",
          pageSize: 10,
          page: 1,
        };
        this.searchForm.supplier_id = this.detailsobj.id;
        this.getListWay();
      },
      // 打开修改备注的弹框
      editNotesWay(row) {
        this.dialogSendOutGoods = true;
        this.$nextTick(() => {
          this.SendOutGoodsClose();
          this.form.order_id = row.order_id;
        });
      },
      SendOutGoodsClose() {
        this.form = {
          order_id: "",
          express_name: "",
          express_num: "",
        };
        this.$refs.form.resetFields();
      },
      submitWay() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.dialogSendOutGoodsSubmit = true;
            orderSelfdelivery(this.form)
              .then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                  this.loading = false;
                  this.dialogSendOutGoods = false;

                  return this.$messages.error(res.msg);
                }
                this.SendOutGoodsClose();
                this.dialogSendOutGoods = false;
                this.dialogSendOutGoodsSubmit = false;
                this.$messages.success(res.msg);
                this.getListWay();
              })
              .catch((err) => {
                this.dialogSendOutGoodsSubmit = false;
                this.$messages.error(err.msg);
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      drawerHandle(row) {
        this.delivery_list = row.delivery_list;
        this.dialogdelivery = true;
      },
      pathWay() {
        this.$router.push("/merchant/procure/afterpickup");
      },
      create_timeWay(vla) {
        this.searchForm.create_time_start = vla[0];
        this.searchForm.create_time_end = vla[1];
      },
      pay_timeWay(vla) {
        this.searchForm.pay_time_start = vla[0];
        this.searchForm.pay_time_end = vla[1];
      },
      detailsDialogway(row) {
        this.detaildialog = true;
        this.detailLoading = true;
        console.log(row);
        getOrderSelfDetail({
          id: row.order_id
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.detailLoading = false;
            this.detaildialog = false;
            return this.$messages.error(res.msg);
          }
          this.detailLoading = false;
          this.detailsObj = res.data;
        });
        //
        // console.log(this.detailsObj);
        // this.detailLoading = false;
      },
    },
  };
</script>

<style lang="scss">
  .el-divider--horizontal {
    margin: 10px 0 !important;
  }

  .search-form-item {
    padding-bottom: 10px;
    padding-right: 20px;

    .el-form-item__label {
      font-size: 12px;
      font-weight: 500;
      // width:96px;
    }

    .el-input {
      width: 180px;
    }
  }
</style>
<style lang="scss" scoped>
  // .app-container {
  //   background-color: #fff !important;
  // }
  .marginBottom-10 {
    margin-bottom: 10px;
  }

  .marginRight-10 {
    margin-right: 10px;
  }

  .flex {
    display: flex;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
  }

  .button-box {
    font-size: 14px;
    text-align: right;
    font-size: 12px;

    .inquire-box {
      background: #1890ff;
      color: #ffffff;
    }

    .reset-box {
      background: #eeeeee;
    }
  }

  .app-container {
    background: #f3f5f7;

    .container-module {
      background: #fff;
      padding: 20px;
      border-radius: 5px;

      .title-module {
        font-size: 18px;
      }

      .search-module {
        padding-top: 20px;
        display: block;
      }

      .table-module {
        .table-top {
          margin-bottom: 20px;
        }

        .table-num {
          margin-left: 5px;
          background: #f0f0f0;
          width: 35px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
